<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>checkbox-radio</title>
		<link rel="stylesheet" href="../css/index.css"/>
		<link rel="stylesheet" href="../css/checkbox-radio.css" />
	</head>
	<body>
		<h2>1、单选 -- 横向排列</h2>
		<section class="checkbox-group">
			<label class="checkbox-item">
				<input type="radio" name="radio-name" class="checkbox-input" value="飞机"/>
				<span class="checkbox-input-custom"></span>
				<div class="checkbox-content">飞机</div>
			</label>
			<label class="checkbox-item">
				<input type="radio" name="radio-name" class="checkbox-input" value="高铁"/>
				<span class="checkbox-input-custom"></span>
				<div class="checkbox-content">高铁</div>
			</label>
			<label class="checkbox-item">
				<input type="radio" name="radio-name" class="checkbox-input" value="火车"/>
				<span class="checkbox-input-custom"></span>
				<div class="checkbox-content">火车</div>
			</label>
		</section>
		<h2>2、单选 -- 竖向排列</h2>
		<section class="checkbox-group checkbox-column">
			<label class="checkbox-item">
				<input type="radio" name="radio-nameq" class="checkbox-input" value="飞机"/>
				<span class="checkbox-input-custom"></span>
				<div class="checkbox-content">飞机</div>
			</label>
			<label class="checkbox-item">
				<input type="radio" name="radio-nameq" class="checkbox-input" value="高铁"/>
				<span class="checkbox-input-custom"></span>
				<div class="checkbox-content">高铁</div>
			</label>
			<label class="checkbox-item">
				<input type="radio" name="radio-nameq" class="checkbox-input" value="火车"/>
				<span class="checkbox-input-custom"></span>
				<div class="checkbox-content">火车</div>
			</label>
		</section>

		<h2>3、多选 -- 横向排列</h2>
		<section class="checkbox-group">
			<label class="checkbox-item">
				<input type="checkbox" name="radio-name-m" class="checkbox-input" value="飞机"/>
				<span class="checkbox-input-custom"></span>
				<div class="checkbox-content">飞机</div>
			</label>
			<label class="checkbox-item">
				<input type="checkbox" name="radio-name-m" class="checkbox-input" value="高铁"/>
				<span class="checkbox-input-custom"></span>
				<div class="checkbox-content">高铁</div>
			</label>
			<label class="checkbox-item">
				<input type="checkbox" name="radio-name-m" class="checkbox-input" value="火车"/>
				<span class="checkbox-input-custom"></span>
				<div class="checkbox-content">火车</div>
			</label>
		</section>
		<h2>4、多选 -- 竖向排列</h2>
		<section class="checkbox-group checkbox-column">
			<label class="checkbox-item">
				<input type="checkbox" name="radio-name-v" class="checkbox-input" value="飞机"/>
				<span class="checkbox-input-custom"></span>
				<div class="checkbox-content">飞机</div>
			</label>
			<label class="checkbox-item">
				<input type="checkbox" name="radio-name-v" class="checkbox-input" value="高铁"/>
				<span class="checkbox-input-custom"></span>
				<div class="checkbox-content">高铁</div>
			</label>
			<label class="checkbox-item">
				<input type="checkbox" name="radio-name-v" class="checkbox-input" value="火车"/>
				<span class="checkbox-input-custom"></span>
				<div class="checkbox-content">火车</div>
			</label>
		</section>

		<h2>5、switch-tab</h2>
		<div class="switch-tab">
			<div class="switch-tab-item">
				<input type="radio" id="tab1" name="switch-tab" class="switch-tab-input" checked value="首页">
				<label for="tab1" class="switch-tab-label">首页</label>
				<div class="badge">66</div>
			</div>
			<div class="switch-tab-item">
				<input type="radio" id="tab2" name="switch-tab" class="switch-tab-input" value="发现">
				<label for="tab2" class="switch-tab-label">发现</label>
			</div>

			<div class="switch-tab-item">
				<input type="radio" id="tab3" name="switch-tab" class="switch-tab-input" value="消息">
				<label for="tab3" class="switch-tab-label">消息</label>
				<div class="badge">12345</div>
			</div>
			<div class="switch-tab-item">
				<input type="radio" id="tab4" name="switch-tab" class="switch-tab-input" value="收藏">
				<label for="tab4" class="switch-tab-label">收藏</label>
			</div>
			<div class="switch-tab-item">
				<input type="radio" id="tab5" name="switch-tab" class="switch-tab-input" value="我的">
				<label for="tab5" class="switch-tab-label">我的</label>
				<div class="badge">99+</div>
			</div>
		</div>
		
		<div class="row">
			<div class="switch-tab-item">
				<input type="radio" id="tab11" name="switch-tab1" class="switch-tab-input" checked value="首页">
				<label for="tab11" class="switch-tab-label">首页</label>
				<div class="badge">66</div>
			</div>
			<div class="switch-tab-item">
				<input type="radio" id="tab21" name="switch-tab1" class="switch-tab-input" value="发现">
				<label for="tab21" class="switch-tab-label">发现</label>
			</div>
		
			<div class="switch-tab-item">
				<input type="radio" id="tab31" name="switch-tab1" class="switch-tab-input" value="消息">
				<label for="tab31" class="switch-tab-label">消息</label>
				<div class="badge">12345</div>
			</div>
			<div class="switch-tab-item">
				<input type="radio" id="tab41" name="switch-tab1" class="switch-tab-input" value="收藏">
				<label for="tab41" class="switch-tab-label">收藏</label>
			</div>
			<div class="switch-tab-item">
				<input type="radio" id="tab51" name="switch-tab1" class="switch-tab-input" value="我的">
				<label for="tab51" class="switch-tab-label">我的</label>
				<div class="badge">99+</div>
			</div>
		</div>

	</body>
	<script>
		const inputs =  document.querySelectorAll('input');
		inputs.forEach(input => {
			input.addEventListener('click',function(e){
				let check = e.target.checked;
				//alert('亲爱的你点击了' + e.target.value)
			})
		})
	</script>
</html>
